import React, {ErrorInfo,Component,ReactNode} from "react";
import Error500 from './Error500'

interface State{
    hasError:boolean;
}
interface Props {
    children: ReactNode;
}

//错误边界
class ErrorBoundary extends Component<Props,State>{
  public state:State = {
      hasError:false
  };

  static getDerivedStateFromError(error:Error) {
    // 更新 state 使下一次渲染能够显示降级后的 UI
    return { hasError: true };
  }

  componentDidCatch(error:Error, errorInfo:ErrorInfo) {
    // 你同样可以将错误日志上报给服务器
    console.log('error-ui')
  }
  render() {
    if (this.state.hasError) {
      // 你可以自定义降级后的 UI 并渲染
      return <Error500 />;
    }

    return this.props.children;
  }
}

export default ErrorBoundary;
